<script setup>

//定义的各种数据
import {reactive, ref} from "vue";
import xx from "@/axios/xx";
import {ElMessage, genFileId} from "element-plus";
import axios, {request} from "axios";
import {Delete, Download, Edit, Plus, Search, Upload} from "@element-plus/icons-vue";

let info = reactive({
  list:[],//列表数据
  form:{},//表单数据
  dialogVisible:false,//对话框数据
  pageNum: 1, //当前页
  pageSize: 5, //每页大小
  total: 0,//总条数
  isAdd: true,//增加和修改标识
  loanTypeList:[],//分类信息所有数据
  bankList:[],//银行所有数据
  userInfoList:[],

})


//查询列表信息
const load = () => {
  xx.get('/loanApplication',{
    params:{
      pageNum:info.pageNum,
      pageSize:info.pageSize,
      username:info.form.username,
    }
  }).then(res =>{
    console.log(res)
    info.list = res.data.list
    //当前页
    info.pageNum = res.data.pageNum;
    //每页大小
    info.pageSize = res.data.pageSize;
    //总条数
    info.total = res.data.total;

  })
}

load()

//分页当前页改变
const handleCurrentChange = (pageNum) => {
  info.pageNum = pageNum;
  load()
}

//分页大小改变
const handleSizeChange = (pageSize) => {
  info.pageSize = pageSize;
  load()
}


//关闭对话框，清空数据
const handleClose = () => {
  info.form = {}
  info.dialogVisible = false
}

</script>

<template>
  <div class="applicationStatus">
    <br>
    <!--快捷查询-->
    <el-form :inline="true" :model="info.form" class="demo-form-inline">
      <el-form-item label="申请贷款账号：">
        <el-input label="产品利率" v-model="info.form.username"  placeholder="精准查询" clearable >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="load" :icon="Search">查询</el-button>
      </el-form-item>
    </el-form>
    <!--表格信息-->
    <el-table :data="info.list" border stripe style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="100" />
      <el-table-column prop="loanType.loanTypeName" align="center" label="贷款类型名称" width="180" />
      <el-table-column prop="loanType.description" align="center"label="描述信息" />
      <el-table-column prop="userInfo.username" align="center" label="贷款申请账号" width="180" />
      <el-table-column prop="userInfo.creditRank" align="center" label="信用等级" width="180" />
      <el-table-column prop="loanType.bank.bankName" align="center" label="银行" width="180" />
      <el-table-column prop="startDate" align="center" label="贷款日期" width="180" />
      <el-table-column prop="deadline" align="center" label="还款日期" width="180" />
      <el-table-column prop="status" align="center" label="审核状态" width="180"  />
    </el-table>
    <!--分页-->
    <br>
    <div class="demonstration"></div>
    <el-pagination
        v-model:current-page="info.pageNum"
        v-model:page-size="info.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="info.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!--  导入数据弹窗-->
  <el-dialog
      v-model="info.ImportDialogVisible"
      title="数据导入"
      width="40%"
      :before-close="handleClose111"
  >
    <el-upload
        ref="upload"
        class="upload-demo"
        :action="info.importExcelUrl"
        :limit="1"
        :on-exceed="handleExceed"
        :auto-upload="false"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      &nbsp;
      &nbsp;
      <el-button class="ml-3" type="success" @click="submitUpload">
        上传文件
      </el-button>
      <template #tip>
        <div class="el-upload__tip text-red">
          只能上传一个文件类型为*.xlsx，重复上传会覆盖前一个文件
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSuccess" > 执行导入 </el-button>
        </div>
      </template>
    </el-upload>

  </el-dialog>
</template>

<style scoped>

</style>